<template>
	<view>
		<view class="">
			<cu-custom>
				<block style="color: #777777;font-size: 48rpx;" slot="content">首页</block>
			</cu-custom>
		</view>
		<picker mode="multiSelector" @change="bindPickerChange" @columnchange="columnchange" :value="index"
			:range="array" range-key="name">
			<view class="uni-input">{{name}}</view>

		</picker>

		<button @click="getAn"></button>

		<button @click="xx">响起</button>
		<button @click="stopAudio">停止</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: [0, 0],
				array: [
					[],
					[]
				],
				name: '请选择',
				data: [],
				childArr: [], // 二级分类数据源
				title: '请选择',
				innerAudioContext:null
			}
		},
		onLoad() {
			this.getCate()
		},
		methods: {
			xx() {
				this.playAudio('https://www.cetczhxf.com/mp3/alarm.mp3')
			},
			playAudio(path) {
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.src = path
				this.innerAudioContext.play()
			},
			stopAudio() {
				if (this.innerAudioContext) {
					this.innerAudioContext.stop()
				}
			},
			getAn() {
				console.info(JSON.stringify(this.array))
				console.info("--->>" + this.index)
			},
			// 任务分类
			getCate() {
				// 生成报警信息
				let app = getApp()
				app.globalData.request({
					url: 'wx/inHiddenDanger/reportRectificationTime',
					data: {
						...params
					}
				}).then(function(res) {

					// 一级分类的数据源
					this.array[0] = res.data.data
					// 将数据源中的二级分类 push 进 childArr，作为二级分类的数据源
					this.childArr = res.result.map((item) => item.child)
					// 第一次打开时，默认给一级分类添加它的二级分类
					this.array[1] = this.childArr[0]

				}).catch(function(e) {})

				this.Get('请求的接口地址').then((res) => {
					if (!res.err) {
						// 返回的数据格式
						// [
						// {id: 4, title: "悬赏", desc: "", child: [{id: 10, title: "现金悬赏", desc: ""}]}
						// ]

					}
				})
			},
			// 获取二级分类
			columnchange(e) {
				// 当滚动切换一级分类时，为当前的一级分类添加它的子类
				if (e.detail.column == 0) {
					// #ifdef H5
					// 在小程序中直接赋值无效  H5 可直接赋值
					this.array[1] = this.childArr[e.detail.value]
					// #endif
					// #ifdef MP-WEIXIN
					// 在 H5 环境下 $set 会导致一级分类无法滚动， 小程序正常运行
					this.$set(this.array, 1, this.childArr[e.detail.value])
					// #endif
				}
			},

			// 选择任务分类
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				let value = e.target.value;
				this.index = value;
				if (this.array[0].length != 0) {
					this.title = this.array[0][this.index[0]].name
				};
				if (this.array[1].length != 0) {
					this.title += ',' + this.array[1][this.index[1]].name
				}

			},
		}
	}
</script>


<style>

</style>
